<template>
  <el-row :gutter="20">
  <el-col :span="24">
    <el-col :span="16" class="button-same">
      <el-button type="primary" size="medium" class="el-icon-plus" @click="onAdd">新增</el-button>
      <!-- <el-button size="medium"  @click="onSyn" class="sync-style">同步</el-button> -->
    </el-col>
    <el-col :span="8">
      <el-form :model="formPro">
        <el-form-item label="项目名称:" label-width="100px" size="medium">
          <el-input v-model="formPro.proName" size="medium" suffix-icon="el-icon-search" placeholder="请输入" @blur="onInputBlur"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
  </el-col>
  <el-col class="table-box">
    <el-table 
            stripe
            style="width: 100%"
            :header-cell-style="{ background: '#f5f5f5' }"
            :data="tableData">
          <el-table-column type="index"
                           label="序号"
                           align="center"
                           width="100"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="项目名称"
                           prop="projectName"
                           align="center">
          </el-table-column>
          <el-table-column prop="cop_type"
                           label="构件类型"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="cop_num"
                           label="构件总数"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="finish_time"
                           label="安装完成时间"
                           align="center"
                           show-overflow-tooltip>
                            <template slot-scope="scope">
                             {{(scope.row.finish_time||'').split(' ')[0]}}
                           </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="260px"
                           align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="onLook(scope.row)">查看</el-button>
              <el-button type="text" @click="onEdit(scope.row)">修改</el-button>
              <!-- <el-button type="text">明细</el-button> -->
              <el-button type="text" @click="onDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  </el-col>
   <el-col :span="24"
                style="margin-top:20px!important;">
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100,200]"
      :page-size="page_size"
      align="center"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </el-col>
        <!-- 查看 -->
        <el-dialog
  :title="todos==1?'新增构件施工信息':todos==2?'修改构件施工信息':'查看构件施工信息'"
  :visible.sync="dialogVisiblePro"
  width="45%"
  :before-close="handleClose">
<AddOrEditComConsInfoDialog :todos="todos" :catchBack="catchBack" :catchSave="catchSave" :detailObj="detailObj"></AddOrEditComConsInfoDialog >
</el-dialog>
  </el-row>
</template>

<script>
import AddOrEditComConsInfoDialog from './addOrEditComConsInfoDialog'
import {ConstrucManagementApi,ProductManageApi} from '@/services/WorkCenter'
export default {
  components:{
    AddOrEditComConsInfoDialog
  },
data(){
  return{
    detailObj:{},
    todos:0,
    dialogVisiblePro:false,
    formPro:{
      proName:''
    },
    tableData:[],
    total:0,
    page:1,
    page_size:10,
    proArr:[]
  }
},
methods:{
//获取施工项目下拉
  getConsProjectList(){
  return  ConstrucManagementApi.getConsProjectList({
     params:{
       type:3,//1设计项目，2生产项目，3施工项目，（默认3）
     }
   }).then((res)=>{
     this.proArr=[];
this.proArr=res.data.list;
   }).catch((error)=>{
     console.log(error)
   })
  },
  onInputBlur(){//输入框失去焦点触发的事件
this.handleCurrentChange(1);
  },
  onSyn(){
this.$message('同步')
  },
  //点击取消时子组件触发事件
  catchBack(){
    this.detailObj={};
    this.todos=0;
    this.dialogVisiblePro=false;
  },
  //点击确定时子组件触发事件
  catchSave(){
    this.handleCurrentChange(1)
this.catchBack();
  },
  //新增
  onAdd(){
    this.todos=1;
this.dialogVisiblePro=true;
  },
  //查看
  onLook(row){
    this.detailObj=row;
    this.todos=3;
  this.dialogVisiblePro=true;
  },
  //编辑
  onEdit(row){
    this.detailObj=row;
    this.todos=2;
    this.dialogVisiblePro=true;
  },
  //删除
  onDel(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          left: true
        }).then(() => {
         ProductManageApi.delComponent({
           data:{
             id:row.cop_id
           }
         }).then((res)=>{
        if(res.code==0){
          this.$message.success('操作成功');
          this.handleCurrentChange(1)
        }
         }).catch((error)=>{
           console.log(error)
         })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
  },
  handleClose(done){
    this.catchBack();
  done();
  },
//每页显示的条数
handleSizeChange(val){
    this.page_size=val;
    this.handleCurrentChange(1)
},
//当前页变化时触发的事件
handleCurrentChange(val){
  this.page=val;
  this.getConsInfo();
},
getConsInfo(){
 return ConstrucManagementApi.getConsInfo({
    params:{
      project_name:this.formPro.proName,
      is_page:1,
      page:this.page,
      page_size:this.page_size,
    }
  }).then((res)=>{
    this.tableData=res.data.list;
    if(this.tableData.length>0){
  this.tableData.forEach(ele=>{
    this.proArr.forEach(ele1=>{
      if(ele.jt_project_id==ele1.jt_project_id){
        this.$set(ele,'projectName',ele1.project_name)
      }
    })
  })
};
    this.total=res.data.total_count;
  }).catch((error)=>{
    console.log(error)
  })
}
},
async created(){
  await this.getConsProjectList()//获取施工项目下拉
await this.getConsInfo();//获取施工列表数据
}
}
</script>

<style lang="scss" scoped>
.button-same{
  padding-left:0px!important;
}
.sync-style{
  margin-left:20px;
}
// /deep/ .el-dialog__body{
//   padding-top:10px!important;
// }
</style>